import React from "react";
import { connect } from "dva";
import { Form, Input, Select, Button, Row } from "antd";
import styles from "./Search.less";

const { Search } = Input;
const { Option } = Select;

const STATUS = [
  {
    key: "0",
    value: "未读",
  },
  {
    key: "1",
    value: "已读",
  },
];

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 18 },
    sm: { span: 18 },
  },
};

class MsgSearch extends React.Component {
  // componentDidMount() {
  //   const { form } = this.props;

  // }

  handleReset = () => {
    const { form, handleSearch } = this.props;
    // handleSearch({});
    form.resetFields();
    form.validateFields((err, values) => {
      if (err) return;
      handleSearch(values);
    });
  };

  handleSumbit = () => {
    const { form, handleSearch } = this.props;
    form.validateFields((err, values) => {
      if (err) return;
      handleSearch(values);
    });
  };

  render() {
    const { form, msgTypes } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form
        className={styles.formcon}
        onSubmit={(e) => {
          e.preventDefault();
        }}
        {...formItemLayout}
      >
        <Row className={styles.root} type="flex">
          <Row>
            <span className={styles.label} style={{ width: "48px" }}>
              标题名称
            </span>
            <Form.Item>
              {getFieldDecorator(
                "processName",
                {},
              )(<Search placeholder="请输入" style={{ minWidth: 234 }} />)}
            </Form.Item>
          </Row>

          <Row>
            <span className={styles.label} style={{ width: "48px" }}>
              类型
            </span>
            <Form.Item>
              {getFieldDecorator(
                "msgType",
                {},
              )(
                <Select placeholder="请选择" style={{ minWidth: 234 }}>
                  {msgTypes.map((item) => (
                    <Option key={item.key} value={item.key}>
                      {item.value}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Row>

          <Row>
            <span className={styles.label} style={{ width: "48px" }}>
              来源
            </span>
            <Form.Item>
              {getFieldDecorator(
                "senderName",
                {},
              )(<Search placeholder="请输入" style={{ minWidth: 234 }} />)}
            </Form.Item>
          </Row>

          <Row>
            <span className={styles.label} style={{ width: "48px" }}>
              状态
            </span>
            <Form.Item>
              {getFieldDecorator("status", { initialValue: "0" })(
                <Select placeholder="请选择" style={{ minWidth: 234 }}>
                  {STATUS.map((item) => (
                    <Option key={item.key} value={item.key}>
                      {item.value}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Row>

          <Row className={styles.btnContainer}>
            <Button onClick={this.handleSumbit} style={{ marginRight: "8px" }}>
              查询
            </Button>
            <Button onClick={this.handleReset}>重置</Button>
          </Row>
        </Row>
      </Form>
    );
  }
}

export default connect()(Form.create()(MsgSearch));
